let datas = [
    {
        id: 1,
        checked: false,
        img: 'images/凄惨红4060.png',
        title: '凄惨红4060',
        content: '品牌:七彩虹 产地:中国<br />规格:8pin x 1<br /> 建议电源:550w',
        number: 1,
        price: 800.0,
    },
    {
        id: 2,
        checked: false,
        img: 'images/华硕天选4060.png',
        title: '华硕天选4060',
        content:
            '品牌:华硕 产地:中国台湾<br />规格:8pin x 1<br /> 建议电源:600w',
        number: 1,
        price: 1000.0,
    },
]

let checkAllEle, checkEles, goodsEles, delAllEle, allNum, allPrice, chooesEles

document.addEventListener('DOMContentLoaded', () => {
    checkAllEle = document.getElementById('checkAll')
    checkEles = document.getElementsByClassName('check')
    goodsEles = document.getElementsByClassName('goods')
    delAllEle = document.getElementById('delAll')
    allNum = document.querySelector('.under .price .num')
    allPrice = document.querySelector('.under .price .total-price')
    chooesEles = document.getElementsByClassName('chooes')

    // 全选
    checkAllEle.addEventListener('change', function () {
        for (let i = 0; i < checkEles.length; i++) {
            checkEles[i].checked = checkAllEle.checked
        }
        updateTotals() // 更新
    })

    // 修改数量、修改总价格、删除
    document.addEventListener('click', function (event) {
        let target = event.target
        let goodsEle = target.closest('.goods')
        if (!goodsEle) return
        // 获取商品数量
        let goodsNumEle = goodsEle.querySelector('.goods-num .num')
        // 获取商品单价
        let priceEle = goodsEle.querySelector('.goods-price .price')
        // 获取商品总价
        let totalPriceEle = goodsEle.querySelector(
            '.goods-total-price .total-price'
        )
        // 点到减号
        if (target.classList.contains('sub')) {
            let num = Math.max(0, parseInt(goodsNumEle.innerText) - 1)
            // 设置数量和总价
            goodsNumEle.innerText = num
            totalPriceEle.innerText = (
                num * parseFloat(priceEle.innerText)
            ).toFixed(2)
            // 点到加号
        } else if (target.classList.contains('add')) {
            let num = parseInt(goodsNumEle.innerText) + 1
            // 设置数量和总价
            goodsNumEle.innerText = num
            totalPriceEle.innerText = (
                num * parseFloat(priceEle.innerText)
            ).toFixed(2)
            // 点到删除
        } else if (target.classList.contains('del')) {
            goodsEle.remove()
        }

        updateTotals()
    })
    // 修改勾选状态
    document.addEventListener('click', (event) => {
        if (event.target.className === 'check') {
            updateCheckAllStatus()
        }
    })

    // 删除全部
    delAllEle.addEventListener('click', function () {
        while (goodsEles.length > 0) {
            goodsEles[0].parentNode.removeChild(goodsEles[0])
        }
        updateTotals()
        checkAllEle.checked = false
    })

    // 更新
    function updateTotals() {
        let nowNum = 0
        let nowPrice = 0

        for (let i = 0; i < goodsEles.length; i++) {
            let checkEle = goodsEles[i].querySelector('.check').checked
            // 获取当前产品个数
            let goodsNumEle = goodsEles[i].querySelector('.goods-num .num')
            // 获取当前总价
            let totalPriceEle = goodsEles[i].querySelector(
                '.goods-total-price .total-price'
            )

            if (checkEle) {
                nowNum += parseInt(goodsNumEle.innerText)
                nowPrice += parseFloat(totalPriceEle.innerText)
            }
        }

        allNum.innerText = nowNum
        allPrice.innerText = nowPrice.toFixed(2)
    }

    function updateCheckAllStatus() {
        let allChecked = true
        for (let i = 0; i < checkEles.length; i++) {
            if (!checkEles[i].checked) {
                allChecked = false
                break
            }
        }
        checkAllEle.checked = allChecked
        updateTotals()
    }
})
